<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
<meta name="format-detection" content="telephone=no" />
<title>移动端测试03</title>
<style type="text/css">
body{ margin: 0; padding: 0; min-width: 320px; max-width: 1080px; overflow-x: hidden;}
/*表单-仿vant*/
.ygbh-form .ygbh-field{ 
    position: relative; 
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 16px;
    overflow: hidden;
    color: #323233;
    font-size: 14px;
    line-height: 24px;
    background-color: #fff;
}
.ygbh-form .ygbh-field__title{
    flex: none;
    width: 72px;
}
.ygbh-form .ygbh-field__value{
    flex: 1;
}
.ygbh-form .ygbh-field__control{
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: #323233;
    line-height: inherit;
    text-align: left;
    background-color: transparent;
    border: 0;
    resize: none;
    outline: none;
}
.ygbh-form .ygbh-field::after{
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    right: 16px;
    bottom: 0;
    left: 16px;
    border-bottom: 1px solid #ebedf0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
}
.ygbh-form .ygbh-field__error-message{
    display: none;
    color: #ee0a24;
    font-size: 12px;
    text-align: left;
}
.ygbh-form .ygbh-field.ygbh-field--error .ygbh-field__control{
    color: #ee0a24;
}
.ygbh-form .ygbh-field.ygbh-field--error .ygbh-field__error-message{
    display: block;
}
</style>
</head>
<body>
<!-- 表单-仿vant -->
<div class="ygbh-form" style="width: 100vw;">
    <div class="ygbh-field ygbh-field--error">
        <div class="ygbh-field__title">用户名1</div>
        <div class="ygbh-field__value">
            <div class="ygbh-field__body"><input type="text" class="ygbh-field__control"></div>
            <div class="ygbh-field__error-message">请输入正确内容</div>
        </div>
    </div>
    <div class="ygbh-field">
        <div class="ygbh-field__title">用户名2</div>
        <div class="ygbh-field__value">
            <div class="ygbh-field__body"><input type="text" class="ygbh-field__control"></div>
            <div class="ygbh-field__error-message">请输入正确内容</div>
        </div>
    </div>
    <div class="ygbh-field">
        <div class="ygbh-field__title">用户名3</div>
        <div class="ygbh-field__value">
            <div class="ygbh-field__body"><input type="text" class="ygbh-field__control"></div>
            <div class="ygbh-field__error-message">请输入正确内容</div>
        </div>
    </div>
</div>


</body>
</html>
